<template>
  <el-dialog :title="info.title" :visible.sync="info.isShow">
    <el-form :model="form">
      <el-form-item label="菜单名称" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单" :label-width="formLabelWidth">
        <el-select v-model="form.pid">
          <el-option label="--请选择--" value></el-option>
          <el-option label="顶级菜单" :value="0"></el-option>
          <!-- 遍历菜单列表 -->
          <el-option v-for="item in menus" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单类型" :label-width="formLabelWidth">
        <el-radio v-model="form.type" :label="1">目录</el-radio>
        <el-radio v-model="form.type" :label="2">菜单</el-radio>
      </el-form-item>
      <el-form-item label="菜单图标" :label-width="formLabelWidth" v-show="form.type===1">
        <el-select v-model="form.icon">
          <el-option label="--请选择--" value></el-option>
          <el-option v-for="item in icons" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单地址" :label-width="formLabelWidth" v-show="form.type===2">
        <el-select v-model="form.url">
          <el-option label="--请选择--" value></el-option>
          <el-option v-for="item in urls" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch v-model="form.status" active-color="green" inactive-color="grey" :active-value="1" :inactive-value="2"></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="info.isAdd" type="primary" @click="comfirm">确 定</el-button>
      <el-button v-else type="primary" @click="update">修 改</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addMenu, getMenu, oneMenu, updateMenu} from '../../../request/api'
import {successAlert} from '../../../utils/alert'
export default {
  props: ["info"],
  data() {
    return {
      form: {
        title:'',//菜单名称
        pid:0,//0:顶级菜单
        type:1,//1:目录  2:菜单
        icon:'',//图标
        url:'',//菜单地址
        status:1,//1:正常 2:禁用
      },
      formLabelWidth: "120px",
      icons: ["el-icon-setting", "el-icon-user", "el-icon-bell"],
      urls: ["menu", "role", "manager","cate","specs","management","member","banner","seck"],
      menus:[],//菜单列表
    };
  },
  methods:{
    //   取消弹框
      cancel(){
          this.info.isShow =  false;
          this.form = {
                title:'',//菜单名称
                pid:0,//0:顶级菜单
                type:1,//1:目录  2:菜单
                icon:'',//图标
                url:'',//菜单地址
                status:1,//1:正常 2:禁用
            };
      },
    //   提交表单
      comfirm(){
          addMenu(this.form).then(res=>{
              if(res.code === 200){
                //   消息提示
                  successAlert(res.msg)
                // 弹框消失
                this.cancel()
                // 触发自定义事件,来更新列表数据
                this.$eventBus.$emit('message')
              }
          })
      },
    //   获取菜单列表数据
      requestMenu(){
          getMenu().then(res=>{
              if(res.code  === 200){
                  this.menus = res.list
              }
          })
      },
      // 获取一条菜单详情
      getDetail(id){
        oneMenu({id}).then(res=>{
          if(res.code === 200){
            this.form = res.list
            this.form.id = id;
          }
        })
      },
      //修改菜单
      update(){
        updateMenu(this.form).then(res=>{
          if(res.code === 200){
            //消息提示
            successAlert(res.msg)
            // 弹框消失
            this.cancel()
            // 触发自定义事件
            this.$eventBus.$emit('message')
          }
        })
      }
  },
  mounted(){
    //   发起菜单列表请求
    this.requestMenu()
  }
};
</script>

<style>
</style>